import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
// 容器类Widget

// 1、填充（Padding）padding:EdgeInsets.fromLTRB()等。all、only、symmetric
// 2、尺寸限制类容器ConstrainedBox、SizedBox、UnconstrainedBox，其他`AspectRatio`，它可以指定子组件的长宽比、`LimitedBox` 用于指定最大宽高、`FractionallySizedBox` 可以根据父容器宽高的百分比来设置子组件宽高等

// 上层组件向下层组件传递约束条件。
// 下层组件确定自己的大小，然后告诉上层组件，注意下层组件的大小必须符合父组件的约束。
// 父组件传递给子组件的约束是 最大宽高不能超过100，最小宽高为0；如果我们给子组件设置宽高都为200，则子组件最终的大小是100*100，因为子组件必须先遵守父组件的约束（相当于父组件的约束和自身的大小求一个交集）。

// ConstrainedBox用于对子组件添加额外的约束。例如，如果你想让子组件的最小高度是80像素，你可以使用const BoxConstraints(minHeight: 80.0)作为子组件的约束。
// BoxConstraints还定义了一些便捷的构造函数，用于快速生成特定限制规则的BoxConstraints，如BoxConstraints.tight(Size size)，它可以生成给定大小的限制；const BoxConstraints.expand()可以生成一个尽可能大的用以填充另一个容器的BoxConstraints。

// 实际上SizedBox只是ConstrainedBox的一个定制，上面代码等价于：

// SizedBox用于给子元素指定固定的宽高

// 有多重限制时，对于minWidth和minHeight来说，是取父子中相应数值较大的,max取较小的

// UnconstrainedBox会消除上层组件的约束，也就意味着UnconstrainedBox 的子组件将不再受到约束，大小完全取决于自己。一般情况下，我们会很少直接使用此组件，但在"去除"多重限制的时候也许会有帮助

Widget redBox = DecoratedBox(
  decoration: BoxDecoration(color: Colors.red),
);

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text(title)),
        body: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Padding(
            //上下各添加8像素补白
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Text("I am Jack"),
          ),
          ConstrainedBox(
            constraints: BoxConstraints(
                minWidth: double.infinity, //宽度尽可能大
                minHeight: 50.0 //最小高度为50像素
                ),
            child: Container(
              height: 5.0, // 最终高度还是50
              child: redBox,
            ),
          ),
          SizedBox(width: 80.0, height: 80.0, child: redBox),
          ConstrainedBox(
            constraints: BoxConstraints.tightFor(width: 80.0, height: 80.0),
            child: redBox,
          ),
          ConstrainedBox(
              constraints: BoxConstraints(minWidth: 60.0, minHeight: 100.0), //父
              child: UnconstrainedBox(
                //“去除”父级限制
                child: ConstrainedBox(
                  constraints:
                      BoxConstraints(minWidth: 90.0, minHeight: 20.0), //子
                  child: redBox,
                ),
              ))
        ]));
  }
}
